<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="renderer" content="webkit">
    <title>无标题文档</title>
    <style type="text/css">
        *{margin:0; padding:0; text-decoration:none;}
        .all{ background:#fff;width:95%; padding:5% 0; border-radius: 20px;
            margin: 5% auto;}
        ul{ list-style:none;}
        .content{ border:1px solid #ccc; margin:5% auto; width:60%;}
        .top{ border-bottom:1px solid #ccc; overflow:hidden;}
        .top h4{ float:left; margin:2%;}
        .top a{ float:right; margin:2% 2% 2% 0; color:#000; font-size:15px;}
        .top a:hover{ text-decoration:underline;}
        .top a i{ display:inline-block; background:url(<{$ipath}>wx/images/base_z2968da.png) no-repeat -1px -6244px; width:14px; height:15px; margin-left:5px;}
        .s_list{ overflow:hidden;}
        .s_list a{ color:#fff; float:right; background:#0C6; display:block; padding:1% 2%; border-radius:10%; margin:2%;}
        .s_table{ border:1px solid #ccc; margin:8% auto; width:90%; font-size:14px;}
        .s_table th{ background:#ddd; padding:1% 0;}
        .s_table td{ text-align:center; padding:1% 0;position: relative}
        .detail{ margin-right:30% !important;}
        .confirm{ margin:10px auto; border:1px solid #ccc; width:20%;height:150px; position:absolute; top:250px; left:819px; background:#fff; display:none;}
        .confirm i{ display:block; background:url(<{$ipath}>wx/images/base_z2968da.png) -2px -3440px no-repeat;width:10px; height:6px; left:55%; position:relative;}
        .confirm p{ margin:20px 20px;}
        .confirm a{ display:inline-block; width:25%; height:30px; background:#44b549; color:#fff; text-align:center; line-height:30px; border-radius:10%; margin-left:15%}
        .button{margin-top:18px;height:30px;width:100px;background-color:#00CC66;border: none;color: white;}
        .file-style3{
            width:100px;
            height:20px;
            line-height:20px;
            display:block;
            background:#009118;
            color:#FFF;
            border-radius:4px;
            cursor:pointer;
            text-align:center;
            font-size:14px;
            text-decoration:none;
            float:left;
        }
        .file-style3-input{
            display:none;
        }
        .upload{
            position: absolute;
            top: 60%;
            left: 37%;
            display: none;
            display: inline-block;
            height: 40px;
            width: 115px;
            opacity: 0;
        }
        .call_url{ margin-left: 20%;margin-top: 5%;
            float: left;}
    </style>
    <script src="<{$ipath}>wx/js/jquery.min.js"></script>
    <script src="<{$ipath}>wx/js/ajaxfileupload.js"></script>
    <script src="<{$ipath}>wx/js/ajaxfileuploadbk1.js"></script>
    <script>

        //下面用于图片上传预览功能
        function setImagePreview(avalue) {
            document.getElementById('textfield').value=document.getElementById('doc').value;
            var docObj=document.getElementById("doc");

            var imgObjPreview=document.getElementById("preview");
            if(docObj.files &&docObj.files[0])
            {
//火狐下，直接设img属性
                imgObjPreview.style.display = 'block';
                imgObjPreview.style.width = '83px';
                imgObjPreview.style.height = '83px';
//imgObjPreview.src = docObj.files[0].getAsDataURL();

//火狐7以上版本不能用上面的getAsDataURL()方式获取，需要一下方式
                imgObjPreview.src = window.URL.createObjectURL(docObj.files[0]);
            }
            else
            {
//IE下，使用滤镜
                docObj.select();
                var imgSrc = document.selection.createRange().text;
                var localImagId = document.getElementById("localImag");
//必须设置初始大小
                localImagId.style.width = "83px";
                localImagId.style.height = "83px";
//图片异常的捕捉，防止用户修改后缀来伪造图片
                try{
                    localImagId.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                    localImagId.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = imgSrc;
                }
                catch(e)
                {
                    alert("您上传的图片格式不正确，请重新选择!");
                    return false;
                }
                imgObjPreview.style.display = 'none';
                document.selection.empty();
            }
            return true;
        }

        $(function(){
            $(".file-style3").click(function() {
                var picid = $(".file-style3-input").attr('id');
                $.ajaxFileUpload({
                    url:'?g=wx&m=wxvote&a=up_img',
                    dataType:'json',
                    fileElementId:picid,
                    type:'post',
                    secureuri:false,
                    success:function(data) {
                        console.log(data['pic']);
                        if (data.error == 1000 || data.error == '1000') {
                            $(".call_url").attr('src', data['pic']);
                        }
                    }
                })
            });
        });
    </script>
    <script>

        $(function(){
            $(".wordbox").blur(function(){
                var inputcard=$(".wordbox").val();
                var reg="^[0-9a-zA-Z]{6,16}$";
                var r = inputcard.match(reg);
                if(r==null || r==""){
                    alert("请输入6-16位密码！");

                    $(".wordbox").val("");
                    return;
                }

            });
            $(".card").blur(function(){
                var card=$(".card").val()+'@'+$("span.net").text();
                var inputcard=$(".card").val();
                var reg="^[A-Za-z0-9]+$";
                var r = inputcard.match(reg);
                if(r==null || r==""){
                    alert("对不起，您输入的格式不正确!");

                    return;
                }

                $.ajax({
                    url:'?g=wx&m=weixin&a=checkname',
                    dataType:'json',
                    data:{"card":card},
                    type:'post',
                    success:function(data){
                        if(data.msg=="true"){
                            alert("此工号已经创建");
                        }
                    }
                });
            });
        });
    </script>
</head>

<body>
<form action="?g=wx&m=weixin&a=add_kf" method="post" enctype="multipart/form-data">
    <div class="all">
        <div class="content">

            <div class="s_list">
                <table cellspacing="0" class="s_table" cellpadding="10"  >
                    <tr>
                        <td colspan="2">
                            <div class="top">
                                <h4 style="margin-left:90px;">基本信息</h4>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:right;width: 150px;">商户</td>
                        <td style="height:100px;text-align:">
                            <img src="avatar-medium.png" class="call_url" id="preview"/>

                            <p style="float: left;margin-top: 13%;">如商户信息有变更，请在卡券基础功能开通页更新。</p>

                            <input type="hidden" class="file-style3-input" id="textfield"  />
                            <input type="file" class="upload" id="doc" name="img_url"  onchange="setImagePreview()"/>
                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td style="text-align:right;width: 150px;">卡券颜色</td>
                        <td style="height:100px;">

                            <select style="width:120px;border: 1px solid #ccc;margin-left: -300px;">
                                <option name="" value=""><div style="height:10px;width:50px;color:#63B359"></div></option>
                                <option name="" value=""></option>
                                <option name="" value=""></option>
                                <option name="" value=""></option>
                                <option name="" value=""></option>
                                <option name="" value=""></option>
                                <option name="" value=""></option>
                                <option name="" value=""></option>
                                <option name="" value=""></option>
                                <option name="" value=""></option>
                                <option name="" value=""></option>
                            </select>

                        </td>
                        <td></td>
                    </tr>
                    <tr>
                        <td style="text-align:right;width: 150px;">优惠券标题</td>
                        <td style="height:80px;">
                            <input type="text" style="width:250px;height:25px;margin-left: -170px;" name="nick" />
                            <p style="line-height:30px;">建议填写优惠券提供的服务或商品名称，描述卡券提供的具体优惠</p>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:right;width: 150px;">团购券标题</td>
                        <td style="height:80px;">
                            <input type="text" style="width:250px;height:25px;margin-left: -170px;" name="nick" />
                            <p style="line-height:30px;">建议填写优惠券提供的服务或商品名称，描述卡券提供的具体优惠</p>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:right;width: 150px;height:80px;">折扣额度</td>
                        <td>
                            <input type="text" name="" value="" style="width:250px;height:25px;margin-left: -180px;"/>折
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:right;width: 150px;height:80px;">折扣券标题</td>
                        <td>
                            <input type="text" name="" value="" style="width:250px;height:25px;margin-left: -190px;line-height:60px;"/>
                            <p>建议填写折扣券“折扣额度”及自定义内容，描述卡券提供的具体优惠 </p>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:right;width: 150px;height:80px;">减免金额</td>
                        <td>
                            <input type="text" name="" value="" style="width:250px;height:25px;margin-left: -190px;line-height:60px;"/>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:right;width: 150px;height:80px;">代金券标题</td>
                        <td>
                            <input type="text" name="" value=""style="width:250px;height:25px;margin-left: -190px;line-height:60px;"／>
                            <p >建议填写代金券“减免金额”及自定义内容，描述卡券提供的具体优惠 </p>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:right;width: 150px;height:80px;">折扣条件(选填)</td>
                        <td>
                            <div style="height: 35px;">
                                <input type="text" name="" value="" style="width:250px;height:25px;margin-left: -190px;"/><span>元</span>
                            </div>
                            <p style="margin-left: -85px;">消费满多少元可用。如不填写则默认：消费满任意金额可用</p>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:right;width: 150px;height:80px;">兑换券标题</td>
                        <td>
                            <input type="text" name="" value="" style="width:250px;height:25px;margin-left: -190px;line-height:60px;"/>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:right;width: 150px;">副标题(选填)</td>

                        <td style="height:80px;">
                            <input type="password" style="width: 250px;height: 25px;margin-left: -170px;" name="password" class="wordbox"/>

                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:right;width:150px;">有效期</td>
                        <td>
                            <input type="radio" name="time" value="" style="margin-left:-200px;"/>固定时间<input type="" name="" value="" /><br/>
                            <div style="line-height: 70px;">
                                <input type="radio" name="time" value="" style="margin-left:-150px;"/>领取后，<select name="">
                                    <option name="" value="1">当天</option>
                                    <option name="" value="2">1天</option>
                                    <option name="" value="3">2天</option>
                                </select>生效，有效天数
                                <select>
                                    <option name="" value="1">1天</option>
                                    <option name="" value="2">2天</option>
                                    <option name="" value="3">3天</option>
                                </select>
                                <div>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:right;width: 150px;">可用时段</td>
                        <td>
                            <div style="line-height: 20px;margin-left: -350px;"><input type="radio" name="shiduan" value="" />全部时段</div><br/>
                            <div style="line-height: 30px;margin-left: -350px;"><input type="radio" name="shiduan" value="" />部分时段</div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div class="top">
                                <h4 style="margin-left:90px;">优惠详情</h4>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:right;width:150px;">简介(选填)</td>
                        <td colspan="2">
                            <textarea rows="8" cols="80" placeholder="简单描述提供的服务或特色服务，吸引消费者"></textarea>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:right;width:150px;">封面图片(选填)</td>
                        <td colspan="2" style="padding-top:25px;">
                            <div style="position:relative;float:left;width:50%" >
                                <p>图片建议尺寸：850像素*350像素，大小不超过2M。</p>
                                <input type="file" name="img_url" value="上传" style="opacity:0"/>
                                <input type="button" value="上传" style="height:25px;width:70px;position:absolute;left:16%;top: 80%;background-color: #1EEE8A;"/>
                            </div>
                            <div style="float:right;width:50%">
                                <p style="text-align:left;">示例</p>
                                <p style="text-align:left;">
                                    建议图片进行适当设计，
                                    图上辅之以营销文案，来吸引消费者。</p>
                                <img src="https://res.wx.qq.com/mpres/htmledition/images/pic/cardticket/card_intro29bc6c.jpg" style="width:250px;"/>
                                <p>（点击图片可查看大图）</p>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:right;width:150px;">优惠说明</td>
                        <td colspan="2">
                            <textarea rows="8" cols="80"></textarea>
                            <p style="color:red">优惠说明不能为空且长度不超过300个汉字</p>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:right;width:150px;">使用须知(选填)</td>
                        <td>
                            <textarea rows="8" cols="80" placeholder="请填写使用本优惠券的注意事项"></textarea>
                        </td>

                    </tr>
                    <tr>
                        <td style="text-align:right;width:150px;">图文介绍(选填)</td>
                        <td>
                            <div style="float:left;width:50%;">
                                <p>图片建议尺寸：900像素 * 500像素，大小不超过2M。至少上传1组图文，最多输入5000字</p>


                            </div>
                            <div style="float:right;width:50%;">
                                <p>示例</p>
                                <p>
                                    图文内容建议上传商品、服务、环境等优质图片，并辅之以简单描述。
                                </p>
                                <img src="https://res.wx.qq.com/mpres/htmledition/images/pic/cardticket/card_thumb29bc6c.jpg"/>

                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div class="top">
                                <span style="margin-left:50px;margin-top:20px;float: left;display: block;">商户介绍(选填)</span>
                                <a style="background:#EAF3EE;color:#119AF6;padding:10px 2%;height:10px;">展开</a>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:right;width:150px;height: 80px;">客服电话</td>
                        <td>
                            <input type="text" name="" value="" style="height:25px;width:250px;margin-left:-170px;"/>
                            <p style="height:30px;width:250px;margin-left:45px;line-height:30px;color:#887F7F;">手机或固话</p>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:right;width:150px;">商户服务</td>
                        <td style="text-align:left;padding-left:130px;">
                            <div style="height:50px;padding-top:30px;">
                                <input type="checkbox" name="" value="" />免费WIFI
                                <input type="checkbox" name="" value="" />可带宠物
                                <input type="checkbox" name="" value="" />免费停车
                                <input type="checkbox" name="" value="" />可外卖
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <div class="top">
                                <span style="margin-left:78px;margin-top:30px;float:left;display:block;line-height:40px;">自定义入口</span>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:right;width:150px;height: 80px;">入口名称</td>
                        <td>
                            <input type="" name="" value="" style="height:25px;width:250px;margin-left:-170px;"/>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:right;width:150px;height: 80px;">引导语(选填)</td>
                        <td>
                            <input type="text" name="" value="" style="height:25px;width:250px;margin-left:-170px;"/>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:right;width:150px;height: 80px;">点击跳转</td>
                        <td>
                            <div style="height:25px;width:250px;margin-left:120px;">
                                <input type="radio" name="tiaozhuan" value="" />图文消息
                                <input type="radio" name="tiaozhuan" value="" />卡券货架
                                <input type="radio" name="tiaozhuan" value="" />网页链接
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="text-align:right;width:150px;height: 80px;">图文消息</td>
                        <td>
                            <div style="position:relative;height: 55px;">
                                <a href="" style="position:absolute;background-color:rgb(245, 228, 228);left: 17%;color: black;">选择图文消息</a>
                            </div>
                        </td>
                    </tr>
                </table>
            </div>

            <div class="bottom_tianjia" style="height:50px;border-top:1px solid #ccc;text-align:center;" />
            <input type="submit" value="下一步" class="button"/>
        </div>
    </div>
    </div>
</form>
</body>
</html>